<template>
  <div id="pageHeatMap">
    <v-header title="热力分析" :showDownloadBtn="false" :saveShow="false"></v-header>
    <div class="page-hmap-box">
      <el-container>
        <el-header class="header-tool-bar" height="50px">
          <span class="conditionquery">
            <i class="font-sty12 font12">查询日期</i>
            <range-date-picker class="displaybox" ref="toolBar" :defaultDate="dateValue"
                    @date-change="handleDate"></range-date-picker>
            <el-button type="primary" size="mini" @click="filterQuery">查询</el-button>
          </span>
        </el-header>
        <el-main class="main-cont">
          <!-- 表格 -->
          <el-table :data="tableData" v-loading="tableLoading" ref="table" class="page-hmap-table">
            <el-table-column
                header-align="center"
                align="center"
                v-for="(item, index) in tableHead"
                :key="index" :prop="item.colume_name"
                :label="item.colume_chs"
                :width="index === 0 ? '600': 'auto'"></el-table-column>
            <el-table-column
                v-if="tableHead.length > 0"
                fixed="right"
                header-align="center"
                align="center"
                label="操作">
              <template slot-scope="scope">
                <el-button @click="handleRowClick(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
  import {mixinParameterManager} from '../../../../assets/js/mixins'
  import {VHeader, RangeDatePicker} from '../../../../components'
  import api from '../../../../api/url'
  import {getDateTime} from '../../../../assets/js/index'
  import ajax from '../../../../api/ajax/ajax'
  export default{
    name: 'pageHeatMap',
    mixins: [mixinParameterManager],
    components: {
      VHeader,
      RangeDatePicker
    },
    data () {
      return {
        tableData: [],
        tableHead: [],
        commonData: [],
        tableLoading: true,
        dateValue: '',
        from_date: '',
        to_date: '',
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        },
        totalCount: 10, // 默认数据总数
        currentPage: 1, // 当前页码
        pagesize: 10 // 默认每页数据量
      }
    },
    methods: {
      queryList () {
        let params = {
          analyse_type: '12',
          from_date: this.from_date,
          to_date: this.to_date
        }
        ajax.post(api.ANALYSESEARCHOBJECT, params).then(res => {
          this.tableLoading = false
          if (res.data.rows.length > 0) {
            this.handleDataList(res.data.rows)
          } else {
            this.tableData = []
          }
        })
      },
      handleDataList (dataList) {
        this.tableData = []
        this.tableHead = []
        let dataKeys = Object.keys(dataList[0])
        for (let key of dataKeys) {
          this.commonData.forEach(item => {
            if (key.indexOf(item.meta_id) !== -1) {
              let theadData = {}
              theadData['colume_name'] = item.colume_name
              theadData['colume_chs'] = item.colume_chs
              this.tableHead.push(theadData)
            }
          })
        }
        dataList.forEach(data => {
          let dataEntries = Object.entries(data)
          let insertData = {}
          this.commonData.forEach(item => {
            for (let [key, value] of dataEntries) {
              if (key.indexOf(item.meta_id) !== -1) {
                insertData[item.colume_name] = value
              }
            }
          })
          this.tableData.push(insertData)
        })
      },
      handleDate (val) {
        if (val) {
          this.from_date = getDateTime(val[0], 's')
          this.to_date = getDateTime(val[1], 's')
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      },
      filterQuery () {
        this.queryList()
      },
      handleRowClick (row, event, column) {
        let href = `${row.url}?sa-request-id=${row.url}___${row.url_path}___${row.event_id}___` + this.from_date + `___` + this.to_date + `&sa-request-url=${row.url}`
        window.open(href, '_blank')
      },
      // 封装查询数据
      packAjax (data) {
      }
    },
    created () {
      this.dateValue = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      this.commonData = JSON.parse(sessionStorage.getItem('commonData')).META_COLUME
      this.queryList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #pageHeatMap
    height: 100%
    overflow hidden
    .page-hmap-box
      overflow auto
      height calc(100% - 66px)
      margin 10px 0 0 10px
      padding-right 10px
    .header-tool-bar
      padding 0 20px
      background #fff
      line-height 50px
      .conditionquery
        float right
        margin-right -10px
        .el-range-editor
          position relative
          top 2px
        .el-button
          vertical-align middle
      .font-sty12
        font-style normal
    .main-cont
      padding 0
      margin-top 3px
      background #fff
      .el-table
        overflow auto
        &::-webkit-scrollbar
          width 0
          height 0
    .el-dialog
      width 900px
      .el-dialog__body
        padding 30px
    .el-form
      .el-input
        .el-input__inner
          height 40px
      .el-date-editor
        width 100% !important
        height 40px
        .el-range-separator
          vertical-align top
          height 40px
          line-height 40px
      .el-select
        width 268px
        height 40px
      .form-buttons
        text-align right

  .displaybox
    display inline-block
</style>
